<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
</style>

<body>
    <div id="box">
        <input v-model="name" type="text" placeholder="请输入姓名">
        <button @click="add">添加</button>
        <div v-for="(item,index) in arr" :key="index" style="background-color:aquamarine;
            display: flex;justify-content: space-between; width: 300px;">
            {{item.name}}
            <button @click="remove(index)">删除</button>
        </div>
    </div>
</body>
<script src="./Vue.js"></script>
<script>
    //6. 动态添加删除数据  [参考效果](https://www.jq22.com/webqd7039)
    const { createApp, ref } = Vue;
    createApp({
        setup() {
            function add() {
                arr.value.push({
                    name: name.value,
                })
                name.value = ''
            }
            function remove(index) {
                arr.value.splice(index, 1);
            }
            let name = ref('')
            let arr = ref([])
            return {
                name,
                add,
                arr,
                remove
            }
        }
    }).mount('#box')

</script>

</html>